<template>
  <div class="desktop">
    <div class="ds-header">
      <!-- 顶部菜单 -->
      <ds-header :systemList="headerSystemList" />
      <!-- 导航 -->
    </div>
    <div class="ds-body-area">
      <div class="ds-body">
        <!-- 左侧菜单 -->
        <div class="ds-side" :style="{width: navCollapse ? '50px' : '250px'}">
          <menberInfo></menberInfo>
          <sideMenu></sideMenu>
          <!-- <sideMenu
            ref="side_menu"
            :collapse="navCollapse"
            :selected.sync="sideActive"
            @change="sideChange"
            @handleOpenTag="handleOpenTagFun"
            @selectDefaultProjrct="selectDefaultProjrctFun"
          />-->
        </div>
        <!-- 主显示内容 -->
        <div class="ds-content" :style="{maginLeft: navCollapse ? '50px' : '200px'}">
          <div class="content">
            <div class="content-inner">
              <router-view />
              <!-- <transition name="fade-transform" mode="out-in">
                <keep-alive>
                  <router-view v-if="$route.meta.keepAlive" />
                </keep-alive>
              </transition>
              <transition name="fade-transform" mode="out-in">
                <router-view v-if="!$route.meta.keepAlive" />
              </transition>-->
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 项目选择弹框 -->
    <portalDialog
      :dialogVisible.sync="isShowPrj"
      title="选择项目"
      :showToolBar="false"
      @defineFun="projectTreeConfirm"
      @comfireFun="comfireFun"
      ref="portalDialog"
      width="50%"
      :vuexAction="true"
    >
      <template slot="content">
        <portalTree
          :defaultProps="defaultProps"
          :data="projectTree"
          :isCheckMutile="false"
          ref="portalTree"
          :filterNode="filterNode"
          :defaultCheckedKeys="defaultCheckedKeys"
          :defaultExpandedKeys="defaultCheckedKeys"
        >
          <template slot="header">
            <headForm @onSubmit="onSubmitFun"></headForm>
          </template>
        </portalTree>
      </template>
    </portalDialog>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import { getProject, saveProject, getProjectTree } from "@/api/desktop/index.js";
import { getPath } from "@/util/avue.js";
import portalDialog from "@/components/portalDialog";
import portalTree from "@/components/portalTree";
import headForm from "./headForm";
// 页面组件
import header from "./header/index.vue"; // 头部
import tags from "./tags.vue"; // 面包屑
import sideMenu from "./sidebar/index.vue";	// 侧边导航
import menberInfo from "./menberInfo";
export default {
  name: "Desktop",
  components: {
    "ds-header": header,
    "tags": tags,
    sideMenu,
    portalDialog,
    portalTree,
    headForm,
    menberInfo
  },
  data () {
    return {
      isFirstLoadProj: true, // 是否保存缓存路径

      sideActive: "", // 左侧菜单选中项路径
      sideNavs: [], // 左侧菜单列表
      navCollapse: false, // 左侧菜单是否收缩
      iframes: [],

      crumbList: [], // 头部标签列表
      headerSystemList: [], // 头部系统列表

      // 项目树
      prjCtrl: "",
      projectTree: [],
      filterProjectName: "",
      filterProjectNo: "",
      checkedNodes: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      currentVal: ""
    };
  },
  computed: {
    ...mapGetters(["project", "isShowPrj", "sibar_status"]),
    // 项目树默认选中的项 项目树默认展开的项
    defaultCheckedKeys () {
      const keys = [];
      if (this.project.projectNo) {
        keys.push(this.project.projectNo);
      }
      return keys;
    }
  },
  watch: {
    "$route.path": function (n) {
      this.sideActive = n;
    },
    // 默认项目
    project (val, oldVal) {
      // 重置所有的 keepAlive 缓存
      if (this.isFirstLoadProj) {
        return;
      }

      // 如果当前路径是iframe形式，则需要重新更新传递的参数
      if (this.$route.query && this.$route.query.src && this.$route.query.src.indexOf("http") > -1) {
        this.$router.push({
          path: getPath({
            name: this.$route.query.name,
            src: this.$route.query.menuSrc
          })
        });
      }

      // 重置在keepAlive缓存的组件
      this.$router.options.routes[0].children.forEach((item, index) => {
        if ("meta" in item && "keepAlive" in item.meta) {
          item.meta.keepAlive = false;
        }
      });
    }
  },
  created () {
    this.getProject();
    this.getProjectTree();
  },
  methods: {
    ...mapMutations(["SET_IS_SHOW_PRJ", "SET_SIBAR_STATUS"]),
    // 头部查询方法
    onSubmitFun (form) {
      this.$refs.portalTree.filter(form);
    },
    // 获取默认项目
    getProject () {
      getProject().then(res => {
        if (res.data.code === 0) {
          this.currentVal = res.data.data.projectName;
          this.$store.commit("SET_PROJECT", res.data.data);
        } else {
          console.log("获取默认项目失败");
        }
      });
    },

    // 缩小左侧菜单
    handleToggleMenu () {
      this.navCollapse = !this.navCollapse;
    },
    crumbsChange (nav) {
      if (nav && nav.path) {
        this.$router.push(nav.path);
      } else {
        this.$router.push("/");
      }
    },
    sideChange (nav) {
      this.$refs.daCrumbs.add(nav);
    },

    /*
     * 项目树
     */
    // 获取项目树
    getProjectTree () {
      getProjectTree().then(res => {
        if (res.data.code === 0) {
          this.projectTree = res.data.data;
        } else {
          console.log("获取项目树失败");
        }
      });
    },
    // 显示项目树选中界面
    handleSelectPrj () {
      this.SET_IS_SHOW_PRJ(true);
    },
    // 点击项目树过滤
    filterProjectTreeSearch () {
      this.$refs.tree.filter(this.filterProjectName);
    },
    // 项目树过滤
    filterNode (value, data) {
      if (!value.filterProjectName && !value.filterProjectNo) {
        return true;
      }
      return data.name.indexOf(value.filterProjectName) !== -1 && data.code.indexOf(value.filterProjectNo) !== -1;
    },
    // 项目树弹框点击取消
    comfireFun () {
      this.SET_IS_SHOW_PRJ(false);
    },
    // 路由跳转
    handleRouterJump (item) {
      this.$router.push({
        path: getPath({
          name: item.label,
          src: item.path
        }),
        query: item.query
      });
    },
    handleOpenTagFun ({ item, status }) {
      this.SET_SIBAR_STATUS({ item, status });

      if (item.needProject === "1" && !this.project.projectName) {
        this.SET_IS_SHOW_PRJ(true);
      } else {
        if (item.pageMode === "3") {
          window.open(item.path);
        } else {
          this.handleRouterJump(item);
        }
      }

    },
    selectDefaultProjrctFun ({ item, status }) {
      this.SET_SIBAR_STATUS({ item, status });
      this.SET_IS_SHOW_PRJ(true);
    },
    // 项目树弹框点击确定
    projectTreeConfirm () {
      this.$nextTick(() => {
        console.log(this.sibar_status);
        this.checkedNodes = this.$refs.portalTree.getCheckedNodesFun();
        if (this.checkedNodes.length > 1 || this.checkedNodes.length === 0) {
          this.$message("请选择一条数据");
        } else {
          const projrct = this.checkedNodes[0];
          projrct.projectName = projrct.name;
          projrct.projectNo = projrct.code;
          // 保存默认项目到后台
          saveProject({
            projectNo: projrct.projectNo,
            projectName: projrct.projectName
          }).then(res => {
            if (res.data.code === 0) {
              this.$store.commit("SET_PROJECT", projrct);
              this.isFirstLoadProj = false;
              this.SET_IS_SHOW_PRJ(false);
              let { item, status } = this.sibar_status;
              let whiteArr = ["sibarClick"];
              if (whiteArr.includes(status)) {
                this.handleRouterJump(item);
              }
            } else {
              this.$message(res.data.msg);
            }
          });
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.desktop {
  height: 100%;
  position: relative;
  user-select: none;
  .ds-header {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1999;
  }
  .ds-header_b {
    position: relative;
    height: 30px;
    z-index: 4;
    .hb-inner {
      height: 30px;
      box-shadow: 0px 0px 2px 0px rgba(23, 40, 60, 0.38);
      background-color: @bgColor3;
    }
    .project {
      position: absolute;
      left: 0;
      top: 0;
      padding-right: 40px;
      height: 30px;
      width: 240px;
      h3 {
        color: @fColor1;
        font-size: 12px;
        height: 30px;
        line-height: 30px;
        text-align: left;
        text-indent: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
      }
      .pt-button {
        position: absolute;
        transform-origin: center center;
      }
    }
    .crumbs {
      padding-left: 240px;
      height: 100%;
    }
  }
  .ds-body-area {
    height: 100%;
    padding-top: 54px;
  }
  .ds-body {
    height: 100%;
    .ds-side {
      position: relative;
      float: left;
      width: 170px;
      height: 100%;
      box-shadow: 0px 0px 8px 0px rgba(23, 40, 60, 0.38);
      transition: width 0.28s;
      background-color:#f6f9fc;
      z-index: 1;
    }
    .ds-content {
      width: calc(100% - 200px);
      margin-left: 200px;
      height: 100%;
      .content {
        padding: 10px;
        height: 100%;
        overflow: hidden;
        background-color: #f1f1f5;
        .content-inner {
          height: 100%;
          overflow-y: auto;
          overflow-x: hidden;
        }
      }
    }
  }
}
</style>
